import type { FC } from 'react'
import { useAppDispatch, useAppSelector } from '@/store/hooks.ts'
import { selectCount, increment, incrementAsync } from '@/store/counterSlice.ts'
import { Button, Space } from 'antd'
import styles from '@/components/css/left.module.less'

const Left: FC = () => {
  const count = useAppSelector(selectCount)
  const countPlus2 = useAppSelector((state) => state.count.value * 2)
  const dispatch = useAppDispatch()
  // useDispatch() 返回的结果，是一个 dispatch 函数
  // const dispatch = useDispatch()

  const clickHandler1 = () => {
    // // action 对象
    // dispatch({ type: 'counter/increment' })
    // dispatch({ type: 'counter/increment', payload: 3 })

    // 调用 action creator 生成 action 对象，并传递到 dispatch 内部
    dispatch(increment())
  }

  const addAsync = () => {
    // 1. 如果我们 dispatch 的是一个 Thunk 函数，则可以使用 store.dispatch(thunk函数)
    // 2. 如果我们 dispatch 的是一个普通的 action 对象，则可以继续使用 useDispatch() 这个 hook 所返回的 dispatch 函数
    // dispatch((dispatch) => {
    //   // 在 Thunk 函数内部，可以执行异步操作
    //   // 把异步操作的结果，以同步的方式，变更到 store 中
    //   setTimeout(() => {
    //     // 以同步的方式，调用 counter 模块下的 increment 方法，实现数值自增 +1 的操作
    //     dispatch(increment())
    //   }, 1000)
    // })

    dispatch(incrementAsync())
  }

  return (
    <div className={styles.boxLeft}>
      <h3>
        count 的值是：{count}，count值的2倍是：{countPlus2}
      </h3>

      {/* 分割线 */}
      <hr className={styles.sep} />

      {/* 按钮区域 */}
      <Space>
        <Button type="primary" onClick={clickHandler1}>
          +1
        </Button>

        <Button type="primary" onClick={() => dispatch(increment(3))}>
          +3
        </Button>

        <Button type="primary" onClick={addAsync}>
          1秒后自增+1
        </Button>
      </Space>
    </div>
  )
}

export default Left
